<template>
	<view class="head0">
		<!-- 搜索框 但我觉得这个页面没必要要这个收索框 -->
		<view class="search-bar">
			<input type="text" placeholder="输入需要搜索的内容" class="search-input" />
			<button type="primary" @click="onSearch">搜索</button>
		</view>


		<!-- 加油站详情 -->
		<view class="head1">

			<view class="head11">
				<view class="page-body">
					<view class="page-section page-section-gap">
						<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"
							:markers="covers">
						</map>
					</view>
				</view>
			</view>
			<view>
				<view class="head12">
					{{ name }}
				</view>
				<view>
					{{ address }}
				</view>
				<view class="head121" @click="carWash">
					门店详情>>
				</view>
			</view>

		</view>

		
			<button class="head2">立即导航</button>
		


	</view>
</template>

<script>
	export default {
		name: 'MapComponent' ,
		data() {
			return {
				gasStation: '',
				name: '',
				image: '',
				address: ''
			}
		},
		onLoad(options) {
			const id = options.id;
			const name = options.name;
			const address = options.address;


			this.gasStation = id;
			this.name = name;

			this.address = address;
		},
		methods: {
			carWash(){
				uni.navigateTo({
					url:"/pages/gasoline/carWash"
				})
			}

		}
	}
</script>

<style>
	.head0 {
		width: 95%;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.search-input {
		flex: 1;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.button {
		margin-left: 10px;
		padding: 10px 20px;
		background-color: #1aad19;
		color: #fff;
		border: none;
		border-radius: 4px;
	}

	.head12 {
		font-size: 20px;
		font-weight: bold;
		line-height: 80rpx;
	}
	.head121{
		color: aqua;
	}
	
	.head2{
		border-bottom: 10rpx solid whitesmoke;
		margin-top: 40rpx;
		background-color: aqua;
		
	}
</style>